<h1 mat-dialog-title>修改 {{roleDetail.roleName}}, ID={{roleDetail.roleId}}</h1>
<div mat-dialog-content style="overflow: unset;">  
    <form #roleForm="ngForm">
        <mat-form-field class="insert-full-width formNum">
            <input matInput type="number" [(ngModel)]="roleDetail.roleId" name="roleId" placeholder="ID" required>
        </mat-form-field>
        <mat-form-field class="insert-full-width">
            <input matInput type="text" [(ngModel)]="roleDetail.roleName" name="roleName" placeholder="角色名稱" required>
        </mat-form-field>
        <mat-form-field class="insert-full-width">
            <input matInput type="number" [(ngModel)]="roleDetail.sortNo" name="sortNo" placeholder="排序" required>
        </mat-form-field>
        <mat-form-field class="insert-full-width formNum">
            <input matInput type="number" [(ngModel)]="roleDetail.accessScope" name="accessScope" placeholder="存取" required>
        </mat-form-field>
        <mat-form-field class="insert-full-width">
            <input matInput #inputDes type="text" maxlength="20" [(ngModel)]="roleDetail.description" name="description" placeholder="描述">
            <mat-hint align="end">{{inputDes.value?.length || 0}}/20</mat-hint>
        </mat-form-field>
        <mat-form-field class="insert-full-width">
            <mat-select [(ngModel)]="roleDetail.parentRoleId" [compareWith]="compareObjects" name="parentRoleId" placeholder="隸屬角色">
                <mat-option *ngFor="let role of roleList" value="{{role.roleId}}">{{role.roleName}}</mat-option>
            </mat-select>
        </mat-form-field>
        <br>
        <mat-checkbox  [(ngModel)]="roleDetail.rejectScope" name="rejectScope" [checked]="roleDetail.rejectScope">
        </mat-checkbox>退回 &nbsp;
        <mat-checkbox  [(ngModel)]="roleDetail.approveScope" name="approveScope" [checked]="roleDetail.approveScope">
        </mat-checkbox>核准 &nbsp;
        <mat-checkbox  [(ngModel)]="roleDetail.submitScope" name="submitScope" [checked]="roleDetail.submitScope">
        </mat-checkbox>送出 &nbsp;
        <mat-checkbox  [(ngModel)]="roleDetail.passScope" name="passScope" [checked]="roleDetail.passScope">
        </mat-checkbox>上陳 &nbsp;
        <mat-checkbox  [(ngModel)]="roleDetail.printScope" name="printScope" [checked]="roleDetail.printScope">
        </mat-checkbox>影印
    </form>
</div>
<div mat-dialog-actions>
    <button mat-raised-button color="primary" (click)="onNoClick()">No</button>
    <button mat-raised-button color="primary" [disabled]="!roleForm.valid" (click)="onYesClick()">Yes</button>
</div>
